<template>
	<div class="h-full bg-white">
		<a-card :bordered="false" :loading="onloading">
			<div class="flex gap-4">
				<!-- <a-image :width="80" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" /> -->
				<a-avatar shape="square" :size="64">
					<template #icon><UserOutlined /></template>
				</a-avatar>
				<div class="text-left">
					<div class="my-[6px]">
						<span v-if="detailInfo.signMethod === '0'" class="relative top-[2px] mr-[12px]">{{
							detailInfo.templateName || '-'
						}}</span>
						<a-tag color="#108ee9" class="h-[24px]">{{ payStatusEnum[detailInfo.payStatus] || '-' }}</a-tag>
					</div>
					<div>{{ detailInfo.code || '-' }}</div>
				</div>
			</div>

			<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] mt-6 pl-2">基础信息</div>
			<div class="flex text-left pt-4">
				<div class="flex-1">
					<div class="text-gray-500">签约方式</div>
					<div>{{ signMethodEnum[detailInfo.signMethod] || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">签约场景</div>
					<div>{{ signPayEnum[detailInfo.signPayment] || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">甲方抬头</div>
					<div>{{ detailInfo.firstParty || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">乙方抬头</div>
					<div>{{ detailInfo.secondPartyName || '-' }}</div>
				</div>
			</div>
			<div class="flex text-left pt-4">
				<div class="flex-1">
					<div class="text-gray-500">合同创建人</div>
					<div>{{ detailInfo.createUserName || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">合同总金额</div>
					<div>{{ detailInfo.contractAmount || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">定金总金额</div>
					<div>{{ detailInfo.depositAmount || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">尾款总金额</div>
					<div>{{ detailInfo.balancePayment || '-' }}</div>
				</div>
			</div>
			<div class="flex text-left pt-4">
				<div class="flex-1">
					<div class="text-gray-500">尾款结清日期</div>
					<div>{{ detailInfo.balancePaymentTime || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">创建时间</div>
					<div>{{ detailInfo.createAt || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">签约日期</div>
					<div>{{ detailInfo.signingDate || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">合同备注</div>
					<div>{{ detailInfo.remark || '无' }}</div>
				</div>
			</div>

			<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2 mt-5">补款信息</div>
			<a-table
				:columns="columns"
				:data-source="detailInfo.list"
				:scroll="{ x: 1500 }"
				:pagination="false"
				row-key="id"
				size="small"
				class="mt-[20px]"
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.dataIndex === 'financeApprovalStatus'">
						{{ $TOOL.dictTypeData('FinanceApprovalStatus', record.financeApprovalStatus) }}
					</template>
					<template v-if="column.dataIndex === 'imgUrl'">
						<a-button v-if="record.imgUrl" type="link" class="p-0" @click="onPreview(record.imgUrl)">查看</a-button>
						<span v-else>-</span>
					</template>
				</template>
				<template #expandedRowRender="{ record }">
					<a-table
						:columns="childColumns"
						:data-source="record.list"
						:scroll="{ x: 1400 }"
						:pagination="false"
						bordered
						row-key="id"
						size="small"
						class="my-[10px]"
					/>
				</template>
			</a-table>
		</a-card>

		<!-- 查看付款凭证 -->
		<image-preview ref="imagePreviewRef" />
	</div>
</template>
<script setup>
	import contractPaymentApi from '@/api/biz/payment/bizContractPaymentApi'
	import { signPayEnum, payStatusEnum, signMethodEnum } from '../contractManagement/enum/contractEnum'
	import { useRoute } from 'vue-router'
	import tool from '@/utils/tool'
	import ImagePreview from '@/components/drawer/imagePreview.vue'

	const route = useRoute()

	onBeforeMount(() => {
		getDetail(route.params.id)
	})

	const columns = [
		{
			title: '申请编号',
			dataIndex: 'id',
			width: 160,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '补款合计',
			dataIndex: 'receivedAmount',
			width: 80,
			ellipsis: true
		},
		{
			title: '审批结果',
			dataIndex: 'financeApprovalStatus',
			width: 80,
			ellipsis: true
		},
		{
			title: '审批人',
			dataIndex: 'financeApprovalPerson',
			width: 100,
			ellipsis: true,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '审批时间',
			dataIndex: 'financeApprovalTime',
			width: 140,
			ellipsis: true,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '驳回原因',
			dataIndex: 'rejectReason',
			width: 180,
			ellipsis: true,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '付款日期',
			dataIndex: 'payDate',
			width: 140,
			ellipsis: true
		},
		{
			title: '付款凭证',
			dataIndex: 'imgUrl',
			width: 80,
			ellipsis: true
		},
		{
			title: '备注',
			dataIndex: 'remark',
			width: 180,
			ellipsis: true,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '创建时间',
			dataIndex: 'createAt',
			width: 140,
			ellipsis: true
		}
	]
	const childColumns = [
		{
			title: '订单编号',
			dataIndex: 'orderNo',
			width: 180,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '业务类型',
			dataIndex: 'businessType',
			width: 80,
			customRender: ({ text }) => tool.dictTypeData('BUSINESS_TYPE', text)
		},
		{
			title: '服务类型',
			dataIndex: 'serviceTypeName',
			width: 180,
			ellipsis: true,
			customRender: ({ text, record }) => `${record.serviceClassName} > ${text} > ${record.serviceProjectName}`
		},
		{
			title: '订单金额',
			dataIndex: 'orderAmount',
			width: 80
		},
		{
			title: '定金金额',
			dataIndex: 'depositAmount',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '尾款金额',
			dataIndex: 'balancePayment',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '补款金额',
			dataIndex: 'payPayment',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '剩余尾款金额',
			dataIndex: 'reduceBalancePayment',
			width: 120,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '服务时长',
			dataIndex: 'serviceLife',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '赠送时长',
			dataIndex: 'giveMonth',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '开始服务月',
			dataIndex: 'serviceStime',
			width: 120,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '结束服务月',
			dataIndex: 'serviceEtime',
			width: 120,
			customRender: ({ text }) => text || '-'
		}
	]

	/**
	 * ====================
	 *       基本逻辑
	 * ====================
	 */
	const detailInfo = ref({})
	const onloading = ref(false)
	const getDetail = (id) => {
		onloading.value = true
		contractPaymentApi
			.getDetail({ id })
			.then((res) => {
				detailInfo.value = res
				onloading.value = false
			})
			.finally(() => {
				onloading.value = false
			})
	}

	/**
	 * 查看凭证
	 */
	const imagePreviewRef = ref(null)
	const onPreview = (imgUrlStr) => {
		imgUrlStr &&
			imagePreviewRef.value.open({
				title: '查看付款凭证',
				tip: '凭证查看（点击图片查看大图）',
				list: imgUrlStr.split(',')
			})
	}
</script>
<style lang="less" scoped>
	.table_border :deep(th) {
		border-color: #6e6e6e !important;
	}
	.table_border :deep(td) {
		border-color: #6e6e6e !important;
	}
	.table_border :deep(table) {
		border-color: #6e6e6e !important;
	}
	.table_border :deep(td:first-child) {
		border-left: 1px solid #6e6e6e !important;
	}
	.table_border :deep(th:first-child) {
		border-left: 1px solid #6e6e6e !important;
	}
</style>
